<template>
  <div >
    <h1>vue 前端路由 demo</h1>

    <div>

      <div style="float:left;width:15%">
        <h3>导航栏</h3>
        <ul>
          <li v-for="n in navigationList" :key="n.id">
  
            <router-link 
              :to="n.path" 
              active-class="active"
            >
              {{n.name}}
            </router-link>


          </li>
        </ul>
      </div>
      <div  style="float:left">
        路由区
        <router-view />
      </div>
    </div>
 
  </div>
</template>

<script>
// vue2 只能安装  npm install vue-router@3 路由组件
export default {
  name: 'App',
    components: {

  },
  data(){
    return {
      navigationList:[
        {
          id:1,
          path:"/home",
          name:"首页"
        },{
          id:2,
          path:"/classManagement",
          name:"班级管理"
        }
      ]
    }
  },
  methods:{

    goTo(nav){

    }
  }

}
</script>

<style>
.active {

  color: orange;

}



</style>
